<template>
    <div class="mylevel">
        <Header :isBack="isBack" v-bind:title="title"></Header>
        <div class="level-box">
            <img :src="userinfo.cove" alt="">
            <p class="name center color-f fs-36">{{userinfo.name}}</p>
            <p class="level center fs-26 color-f">当前等级：LV{{userinfo.level}}</p>
            <div class="level-num space-between padding-24">
                <p class="color-f fs-26" v-for="(item,index) in (0,11)" :key="index" :class="{now:index==userinfo.level}">{{index}}</p>
            </div>
            <div class="level-bar space-between padding-24">
                <span v-for="(item,index) in (0,10)" :key="index" :class="{current:item<=userinfo.level}"></span>
            </div>
            <p class="fs-26 color-f padding-24" style="margin-top:0.2rem">等级数据每天早上6点更新</p>
        </div>
        <div class="level-privilege bg-f padding-24">
            <div class="arrow-right space-between" >
                <p class="title fs-32">当前等级特权</p>
                <p class="more fs-24 color-9" @click="gotolevelprivilege">等级特权</p>
            </div>
            <div class="privilege-list">
                <div class="privilege-item center-col" v-for="(item,index) in privilegelist" :key="index">
                    <span class="bg-r"></span>
                    <p class="fs-32 color-6">{{item}}</p>
                </div>
            </div>
        </div>
        <div class="next-level bg-f padding-24">
            <p class="fs-32 title">距离下一个等级LV{{userinfo.level+1}}</p>
            <div class="space-around">
                <div class="item">
                    <div class="ring center">还需300首</div>
                    <p>听歌量</p>
                </div>
                <div class="item">
                    <div class="ring center">还需20天</div>
                    <p>登录天数</p>
                </div>
            </div>
        </div>
        <p class="tshi color-9 padding-24">听歌量是指累计播放的歌曲数量而非播放次数，且实际播放时间过短的歌曲将不纳入计算，每天最多计算300首</p>
    </div>
</template>
<script>
export default {
    data(){
        return{
            isBack:true,
            title:'我的等级',
            userinfo:{
                cove:require("../../assets/image/cove.png"),
                name:'昵称',
                level:2,
            },
            privilegelist:[
                '等级数据每天早上6点更新的后部分关电脑肉疼还没呢改好没改哼哼哪个号码更换热你更好麻烦改号码  没有你发个还没搞好',
                '等级数据每天早上6点更新阿如火如天默认 他一年tm tme t你拜托你没头没脑干嘛 '
            ]
        }
    },
    methods:{
        gotolevelprivilege(){
            this.$router.push('/levelprivilege')
        }
    }
}
</script>
<style lang="scss" scoped>
.mylevel{
    margin-bottom: 0.2rem;
    .level-box{
        padding-top: 0.001rem;
        margin-top: 1rem;
        width: 100%;
        height: 4.2rem;
        position: relative;
        background: linear-gradient(to right,#680DAE,#9529C6);
        img{
            width: 1.2rem;
            height: 1.2rem;
            border-radius: 50%;
            margin: 0.2rem auto 0;
        }
        .name{
            margin-top: 0.2rem;
        }
        .level{
            margin-top: 0.1rem;
        }
        .level-num {
            margin-top: 0.2rem;
        }
        .now{
            width:0.34rem;
            height:0.34rem;
            background:#25CBC2;
            border-radius:50%;
            line-height: 0.34rem;
            text-align: center;
        }
        .level-bar{
            margin-top: 0.1rem;
            span{
                width:0.6rem;
                height:0.16rem;
                display: block;
                background:#650c8e;
            }
            .current{
                background-color: #25CBC2;
            }
        }
    }
    .level-privilege{
        margin-top: 0.2rem;
        .space-between{
            height: 1rem;
            position: relative;
            .more{
                position: absolute;
                right: 0.3rem;
            }
        }
        .privilege-list{
            width: 100%;
            height: auto;
            .privilege-item{
                position: relative;
                width: 100%;
                height: auto;
                min-height: 0.8rem;
                line-height: 0.4rem;
                padding: 0.2rem 0;
                box-sizing: border-box;
                span{
                    position: absolute;
                    top: 0.35rem;
                    left: 0;
                    display: block;
                    width: 0.11rem;
                    height: 0.11rem;
                    border-radius: 50%;
                }
                p{
                     margin-left: 0.4rem;
                }
            }
        }
    }
    .next-level{
        margin-top: 0.2rem;
        height: 4.2rem;
        .title{
            line-height: 1rem;
        }
        .space-around{
            height: 3rem;
            //background-color: greenyellow;
            .item{
                font-size: 0.32rem;
                .ring{
                    width: 2.3rem;
                    height: 2.3rem;
                    border: 0.1rem solid #540479;
                    border-radius: 50%;
                    
                }
                p{
                    text-align: center;
                    margin-top: 0.1rem;
                }
            }
        }
    }
    .tshi{
        line-height: 0.5rem;
        margin-top: 0.2rem;
    }
}
</style>
